<template>
    <div>
      <!-- 学生信息表格 -->
      <el-table :data="tableData.slice(startIndex, endIndex)" border stripe v-loading="loading" :header-cell-style="{backgroundColor:'aliceblue',color:'#666'}">
        <el-table-column prop="id" label="学号" align="center" sortable/>
        <el-table-column prop="name" label="姓名" align="center"/>
        <el-table-column prop="college" label="学院" align="center"/>
        <el-table-column prop="type" label="助学贷款类型" align="center"/>
        <el-table-column label="操作" width="250px" align="center">
          <template #default="scope">
              <el-button type="primary" plain @click="showDetails(scope.row)">详情</el-button>
              <span v-if="scope.row.greenState === '待审核'" style="margin-left: 20px;">待审核</span>
              <span v-if="scope.row.greenState === '审核通过'" style="color: green;margin-left: 20px;">已通过</span>
              <span v-if="scope.row.greenState === '审核未通过'" style="color: red;margin-left: 20px;">已拒绝</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @current-change="handlePageChange"
        style="margin-top: 20px;"
      ></el-pagination>
  
      <!-- 详情弹窗 -->
      <el-dialog v-model="dialogVisible" title="详细信息" width="50%">
        <!-- 学生详细信息表单 -->
        <el-form :model="selectedStudent" :rules="formRules" label-width="100px">
          <!-- 表单项配置... -->
          <el-form-item label="学号" prop="id" >{{ selectedStudent.id }}</el-form-item>
          <el-form-item label="姓名" prop="name">{{ selectedStudent.name }}</el-form-item>
          <el-form-item label="手机号" prop="phone">{{ selectedStudent.phone }}</el-form-item>
          <el-form-item label="学院" prop="college">{{ selectedStudent.college}}</el-form-item>
          <el-form-item label="年级" prop="grade">{{ selectedStudent.grade}}</el-form-item>
          <el-form-item label="评定学年" prop="year">{{ selectedStudent.year}}</el-form-item>
          <el-form-item label="助学贷款类型" prop="type">{{ selectedStudent.type}}</el-form-item>
          <el-form-item label="申请贷款金额" prop="amount">{{ selectedStudent.amount}} （单位：元）</el-form-item>
          <el-form-item label="申请陈述" prop="description" style="white-space: pre-wrap;word-wrap: break-word;">{{ selectedStudent.description}}</el-form-item>
          <el-form-item label="备注" prop="information" style="white-space: pre-wrap;word-wrap: break-word;">{{ selectedStudent.information}}</el-form-item>
        </el-form>
        <el-button type="primary" @click="closeDialog" style="width: 25%;">关闭</el-button>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { SearchApply } from '@/api/index/admin';
  import { getId } from '@/utils/jwt-decode';
  
  export default {
    data() {
      return {
        id: '',
        tableData: [],
        dialogVisible: false,
        loading: true,
        selectedStudent: {},
        formRules: {},
        startIndex: 0,
        endIndex: 10, // 每页显示数量
        currentPage: 1, // 当前页码
        pageSize: 10, // 每页显示数量
      };
    },
    created(){
      this.id= getId();
      this.fetchDataFromBackend();
    },
    methods: {
      handlePageChange(newPage) {
        this.currentPage = newPage;
        this.startIndex = (newPage - 1) * this.pageSize;
        this.endIndex = this.startIndex + this.pageSize;
      },
      async fetchDataFromBackend() {
        try {
          this.loading = true;
          const response = await SearchApply({id:this.id});
          this.loading = false;
          console.log(response);
          // 假设返回的数据结构为数组
          this.tableData = response.data.data.map((item) => ({
            id: item.SNO,
            name: item.NAME,
            type: item.TYPE,
            phone:item.PHONE,
            college:item.COLLEGE,
            grade:item.GRADE,
            year:item.YEAR,
            amount:item.AMOUNT,
            description:item.DESCRIPTION,
            information:item.INFORMATION,
            greenState:item.GREENSTATE
          }));
        } catch (error) {
          console.error('Failed to fetch data from the backend:', error);
        }
      },
      showDetails(row) {
        console.log(row);
        this.selectedStudent = row ;
        this.dialogVisible = true;
      },
      closeDialog() {
        this.dialogVisible = false;
      },
    },
    mounted() {
      this.fetchDataFromBackend();
    },
  };
  </script>
  
  <style scoped>
  ::v-deep .el-form-item__content {
    display: block !important;
    text-align: left;
  }
  </style>